<template>
  <el-card shadow="never">
    <!-- 头部 -->
    <div slot="header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"> <i class="el-icon-house"></i> 首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 主体内容 -->
    <!-- 表格区域 -->
    <div class="filter-form">
      <el-input v-model="params.query"
                size="small"
                clearable
                @clear="search"
                class="ipt">
        <template slot="append"><i @click="search"
             class="el-icon-search"></i></template>
      </el-input>
      <el-button @click="$router.push('/goods/add')"
                 type="primary"
                 size="small"
                 icon="el-icon-plus">增加</el-button>
    </div>
    <!-- 表格 -->
    <el-table border
              :data="list">
      <el-table-column label="#"
                       type="index"></el-table-column>
      <el-table-column label="ID"
                       prop="goods_id"></el-table-column>
      <el-table-column label="商品名称"
                       prop="goods_name"
                       width="500"></el-table-column>
      <el-table-column label="价格"
                       prop="goods_price"></el-table-column>
      <el-table-column label="数量"
                       prop="goods_number"></el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-tag type="info"
                  v-if="scope.row.goods_state==0">未通过</el-tag>
          <el-tag type="warning"
                  v-if="scope.row.goods_state==1">审核中</el-tag>
          <el-tag type="success"
                  v-if="scope.row.goods_state==2">已审核</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="是否热销">
        <template slot-scope="scope">
          <el-tag type="info"
                  v-if="scope.row.is_promote">是</el-tag>
          <el-tag type="warning"
                  v-else>否</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间"
                       width="160">
        <template slot-scope="scope">
          {{ scope.row.add_time | formate }}
        </template>
      </el-table-column>
      <el-table-column label="操作"
                       fixed="right"
                       width="120">
        <template>
          <el-button size="small"
                     type="success"
                     icon="el-icon-edit"
                     circle></el-button>
          <el-button size="small"
                     type="danger"
                     icon="el-icon-delete"
                     circle></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination background
                   @size-change="sizeChange"
                   @current-change="currentChange"
                   :page-size="params.pagesize"
                   :current-page="params.pagenum"
                   layout=' sizes,prev, pager, next,->, total'
                   :page-sizes="[10,20,30,40,50]"
                   :total="total">
    </el-pagination>

  </el-card>
</template>

<script>
export default {
  name:'Goods',
  data () {
    return {
      params: { // 查询参数
        query:'',
        pagenum:1,
        pagesize:10
      },
      list:[], // 列表
      total:0 // 总数
    }
  },
  created () {
    this.getGoodList()
  },
  methods: {
    // 搜索查询
    search () {
      this.params.pagenum = 1 // 页码归1
      this.getGoodList() // 重新拉取列表
    },
    // 获取商品列表
    async getGoodList () {
      const { data:res } = await this.$axios.get('/goods', {
        params:this.params
      })
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.total = res.data.total
      this.list = res.data.goods
    },
    // 页码变化
    currentChange (val) { // val是最新页码
      this.params.pagenum = val
      this.getGoodList()
    },
    // 每页数量变化
    sizeChange (val) { // val是最新的每页数量
      this.params.pagesize = val
      this.getGoodList()
    }
  }
}
</script>

<style>

</style>
